<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>silde demo</title>
    <script src="js/jquery-1.10.2.js"></script>
</head>
<style>
    *{margin:0px;padding:0px;}
    /*样式名 只有foreverSlide可修改 内部不可改*/
    .foreverSlide{width:640px;height:400px;
        overflow: hidden;margin:auto;position:relative;}
    .foreverSlide_box{height:400px;left:0px;top:0px;position:absolute;}

    .foreverSlide_box li{float: left;width: 640px;height:400px;background: #000;display:block;}
    .foreverSlide_box li img{width: 640px;height:400px;display:block;}


    .forever-titleBox{position:absolute;bottom:0px;left:0px;width:100%;height:40px;}
    .forever-pointer{display:block;width:100%;height:20px;}
    .forever-pointer li{height:20px;width:20px;border-radius: 50px;background: #fff;display: inline-block;margin:0px 5px;}
    .forever-pointer li.current{background: #000;}

    .forever-title{display: block;width:100%;height:20px;color:#fff;}

    .forever-left{position:absolute;left:0px;top:0px;height:50px;width:50px;background:#fff;}
    .forever-right{position:absolute;right:0px;top:0px;height:50px;width:50px;background:#fff;}

</style>
<body>
<!--轮播html-->
<div class="foreverSlide">
    <ul class="foreverSlide_box">
        <li rel="标题1"><img src="images/desktop.jpg" /></li>
        <li rel="标题2"><img src="images/desktop2.jpg" /></li>
        <li rel="标题3"><img src="http://5.26923.com/download/pic/000/328/ba80a24af0d5aba07e1461eca71f9502.jpg" /></li>
    </ul>
</div>
<script>
    (function($){
        $.fn.foreverSlide=function(option){
            var opt={
                speed:300,//动效速度
                spe:1000,//轮播间隔
                pointerAlign:"center",//点的方向
                titleHtml:"rel",//标题属性
                hasHandle:false,//是否显示左右操作键
                hasTitle:false,//是否显示标题
                hasPointer:false//是否显示轮播点
            };
            option=$.extend(opt,option);
            var $this=$(this)
                    ,box=$this.find(".foreverSlide_box")
                    ,length=box.find("li").length
                    ,first=box.find("li").eq(0)
                    ,last=box.find("li:last")
                    ,lWidth=first.width()
                    ,indexI=0
                    ,hover=false
                    ;
            var pointHtml=""
                    ,toolHtml=""
                    ,titleHtml=""
                    ,handleHtml=""
                    ;

            //生成元素
            pointHtml="<ul class='forever-pointer' style='text-align:"+option.pointerAlign+"' >";
            for(var p=0;p<length;p++){
                if(p==0) {
                    pointHtml += '<li class="current"></li>';
                }else{
                    pointHtml += '<li></li>';
                }
            }
            pointHtml+='</ul>';
            if(!option.hasPointer)pointHtml="";
            if(option.hasTitle){
                titleHtml=  '<div class="forever-titleBg"></div>'+
                        '<div class="forever-title"></div>' ;
            }else{
                titleHtml="";
            }
            toolHtml='<div class="forever-titleBox">' +
                    pointHtml+
                    titleHtml+
                    '</div>';

            if(option.hasHandle){
                handleHtml='<div class="forever-left"></div>' +
                        '<div class="forever-right" ></div>';
            }else{
                handleHtml='';
            }
            $this.append(toolHtml+handleHtml);

            box.width(lWidth*length);

            $this.find(".forever-left").click(function() {
                if(box.is(":animated")) return;
                turnR();
            });
            $this.find(".forever-right").click(function() {
                if(box.is(":animated")) return;
                turnL();
            });
            $this.find(".forever-pointer li").each(function(i,e){
                $(e).click(function(){
                    indexI=i-1;
                    turnL();
                });
            });
            $this.hover(function(){
                hover=true;
            },function(){
                hover=false;
            });

            setInterval(function(){
                if(hover)return;
                turnL();
            },option.spe);
            function turnL(){
                indexI++;
                if(indexI==length){
                    first.css({left:lWidth*length,position:"relative"});
                    box.stop().animate({left:-indexI*lWidth},option.speed,function(){
                        box.css({left:0});
                        first.removeAttr("style");
                        indexI=0;
                    });
                    $this.find(".forever-title").html(box.find("li").eq(0).attr(option.titleHtml));
                    $this.find(".forever-pointer li").removeClass("current").eq(0).addClass("current");
                }else{
                    box.stop().animate({left:-indexI*lWidth},option.speed);
                    $this.find(".forever-title").html(box.find("li").eq(indexI).attr(option.titleHtml));
                    $this.find(".forever-pointer li").removeClass("current").eq(indexI).addClass("current");
                }
            }
            function turnR(){
                indexI--;
                if (indexI == -1) {
                    last.css({left: -lWidth*length, position: "relative"});
                    box.stop().animate({left: -indexI * lWidth}, option.speed, function () {
                        last.removeAttr("style");
                        indexI = length-1;
                        box.css({left: -lWidth*(length-1)});
                    });
                    $this.find(".forever-title").html(box.find("li").eq((length-1)).attr(option.titleHtml));
                    $this.find(".forever-pointer li").removeClass("current").eq(length-1).addClass("current");
                } else {
                    box.stop().animate({left: -indexI * lWidth}, option.speed);
                    $this.find(".forever-title").html(box.find("li").eq((indexI)).attr(option.titleHtml));
                    $this.find(".forever-pointer li").removeClass("current").eq(indexI).addClass("current");
                }
            }
        };
    })(jQuery);

    //调用组件
    $(".foreverSlide").foreverSlide({
        speed:300,//动效速度
        spe:2000,//轮播间隔
        pointerAlign:"center",//点的方向
        titleHtml:"rel",//标题属性
        hasHandle:true,//是否显示左右操作键
        hasTitle:true,//是否显示标题
        hasPointer:true//是否显示轮播点
    });
</script>

</body>
</html>